<template>
  <div class="DetermineInvestment_2">
      <div class="DetermineInvestment_1">
          <div  class="DetermineInvestment_3">
              <div class="DetermineInvestment_5"></div>
            <div class="DetermineInvestment_4"><span class="DetermineInvestment_span2">{{list.propertyName}}</span></div>
            <div class="DetermineInvestment_4">编号：{{list.propertyId}}</div>
            <div class="DetermineInvestment_4">收益金额：<span class="DetermineInvestment_span">{{list.yearYield*amount*0.01}}</span></div>
            <div class="DetermineInvestment_4">投资金额：<span class="DetermineInvestment_span">{{amount}}</span></div>
            <div class="DetermineInvestment_4">年化利率：<span class="DetermineInvestment_span">{{list.yearYield}}%</span></div>
            <div class="DetermineInvestment_4">回款日期：<span class="DetermineInvestment_span">{{now}}</span></div>
            <div class="DetermineInvestment_4">
                <button class="DetermineInvestment_button" @click="DetermineInvestment_button2">确定</button>
            </div>
          </div>
      </div>
      <Bottom/>
  </div>
</template>

<script>
import Bottom from "../finance/Bottom.vue"
import axios from "axios";
import moment from 'moment'

export default {
    
data () {
    return {
        propertyId: null,
        amount:null,//投资金额
        list:{},
        now:null,
        benefits:null,//获益金额
    }
},
components: {
    Bottom,
  },
   methods: {
       DetermineInvestment_button2(){
           this.benefits=this.list.yearYield*this.amount*0.01
           this.$router.push({path:'Transaction',query:{amount:this.amount,propertyId:this.propertyId,benefits:this.benefits}}); 
       },
    getSignInformation4() {
        this.now = moment().add(1, 'y').format('YYYY-MM-DD');
      this.propertyId = this.$route.query.propertyId;
      this.amount = this.$route.query.amount;
    //   alert(this.propertyId)
      axios({
          url: "api/invest/queryInvestmentGetById",
          method: "post",
          params: {
              propertyId:this.propertyId
          },
        }).then((res) => {
            this.list=res.data
            // console.log(res);
        });
    },
  },
  created() {
      this.getSignInformation4();
    },
}
</script>

<style>
.DetermineInvestment_button{
    width: 300px;
    height: 50px;
    background-color: red;
    border: 1px solid red;
    color: #ffffff;
    font-size: 140%;
    cursor: pointer;
}
.DetermineInvestment_span2{
    font-weight:bold;
    font-size: 130%;
}
.DetermineInvestment_span{
    color: red;
    font-size: 120%;
}
.DetermineInvestment_5{
    width: 100%;
    float: left;
    height: 40px;
}
.DetermineInvestment_4{
    float: left;
    width: 100%;
    height: 40px;
    margin-top: 5px;
    background-color: #fff;
    text-align: center;
}
.DetermineInvestment_3{
    width: 40%;
    float: left;
    margin-left: 30%;
    height: 90%;
    margin-top: 20px;
    /* background-color: red; */
}
.DetermineInvestment_1{
    width: 80%;
    float: left;
    height: 500px;
    margin-left: 10%;
    margin-top: 150px;
    margin-bottom: 150px;
    background-color: #ffffff;
}
.DetermineInvestment_2{
    float: left;
    background-color: #f6f6f6;
    width: 100%;
    height: 100%;
}
</style>